<template>
  <div class="img_content" ref="content">
    <canvas class="mycanvas" ref="canvas"></canvas>
  </div>
</template>

<script>
import { fabric } from "fabric";
import { addUrlToken } from "@/utils/allTool";
export default {
  name: "imgBox",
  data() {
    return {
      panning: false,
      my_canvas: null,
    };
  },
  mounted() {
    var that = this;
    this.$nextTick(function () {
      //调用需要执行的方法
      that.initCanvas();
    });
  },
  props: ["CanvasWidth", "CanvasHeight"],
  methods: {
    initCanvas() {
      // 初始化Canvas
      var _this = this;
      var initcanvas = this.$refs.canvas;
      var canvasWidth = this.CanvasWidth ? this.CanvasWidth : 700;
      var canvasHeight = this.CanvasHeight ? this.CanvasHeight : 470;
      // 1. 实例化canvas 画布
      var canvas = new fabric.Canvas(initcanvas, {
        width: canvasWidth,
        height: canvasHeight,
        selection: false,
        crossOrigin: "anonymous",
      });
      // 2. 设置背景图片作为底图（这里导入图片使用require，不要 使用 '../../' 方式）
      // canvas.width / 4764  （4764 是我底图图片宽度）
      // canvas.height / 3367 （3367 是我 底图图片宽度）
      canvas.originX = "center";
      canvas.originY = "center";

      initcanvas.addEventListener(
        "keydown",
        function (e) {
          var e = e ? e : window.event;
          var currKey = e.keyCode || e.which || e.charCode;
          console.log(currKey);
          if (currKey == 87) {
            console.log("键盘事件");
          }
        },
        false
      );

      canvas.on("mouse:down", (e) => {
        if (!e.target) {
          _this.panning = true;
        }
      });

      canvas.on("mouse:up", (e) => {
        _this.panning = false;
      });

      // 移动画布事件
      canvas.on("mouse:move", function (e) {
        if (_this.panning && e && e.e) {
          var delta = new fabric.Point(e.e.movementX, e.e.movementY);
          canvas.relativePan(delta);
        }
      });
      //鼠标滚动画布放大缩小
      canvas.on("mouse:wheel", function (e) {
        var zoom = (e.e.deltaY > 0 ? -0.5 : 0.5) + canvas.getZoom();
        zoom = Math.max(1, zoom); //最小为原来的1/10
        zoom = Math.min(10, zoom); //最大是原来的3倍
        var zoomPoint = new fabric.Point(e.e.offsetX, e.e.offsetY);
        canvas.zoomToPoint(zoomPoint, zoom);

        canvas.renderAll();
      });

      this.my_canvas = canvas;
    },
    SetSize(size) {
      console.log("调整大小");
      // 设置新的宽度和高度
      this.my_canvas.setWidth(size[0] + "");
      this.my_canvas.setHeight(size[1] + "");
      this.my_canvas.renderAll();
      // 重新渲染 Canvas
    },
    SetImage(url) {
      console.log("调用画布");
      var that = this;
      // 重置canvas，解决缩放，平移导致的位置不对问题

      that.my_canvas.setZoom(1);
      that.my_canvas.absolutePan(new fabric.Point(0, 0));

      that.my_canvas.renderAll();

      var img_ = new Image();
      img_.setAttribute("crossOrigin", "anonymous");
      img_.src = addUrlToken(url);
      console.log(url);
      //清空画布
      that.my_canvas.clear();

      img_.onload = function () {
        var scale = that.my_canvas.height / img_.height;
        console.log("scale:" + scale);
        scale = parseFloat(scale.toFixed(3));
        var left = (that.my_canvas.width - img_.width * scale) / 2;
        var top = 0;
        that.my_canvas.setBackgroundImage(
          img_.src,
          that.my_canvas.renderAll.bind(that.my_canvas),
          {
            originX: "left",
            originY: "top",
            left: left,
            top: top,
            scaleX: scale,
            scaleY: scale,
            crossOrigin: "anonymous",
          }
        );
      };
    },
  },
};
</script>

<style scoped lang="scss">
.img_content {
  width: 100%;
  height: 100%;
  .mycanvas {
    width: 100%;
    height: 100%;
    background-color: #023255;
  }
}
</style>
